<template>
  <!-- 基本信息 -->
  <div class="companyInfo">
    <div class="infoMain padding15All">
      <div class="img">
        <img alt=""
             src="@/assets/img/indexHeader.png">
        <div class="avatar">
          <img :src="pageInfo.userHeadimg ? pageInfo.userHeadimg : require('@/assets/img/indexLogo.png')" alt="">
        </div>
      </div>
      <div class="infoTitle">
        <h2>{{ pageInfo.enterpriseName }}</h2>
        <span>统一社会信用代码：{{ pageInfo.creditCode }}</span>
        <p class="flexcenter" style="margin: 10px 0">
          <i class="el-icon-s-claim" style="color:#28cc60;font-size: 28px"></i>
          {{ pageInfo.enterpriseState === 1 || pageInfo.enterpriseState === 2 ? "未实名" : "已实名" }}
        </p>
        <el-button type="text" @click="lookCertificate">查看数字证书</el-button>
      </div>
      <div class="info flexcenter">
        <div class="message">
          <p><i class="el-icon-user-solid" style="color:#e67531;"></i>法定代表人： {{ pageInfo.legalPerson }}</p>
          <span>证件号：{{ desensitization(pageInfo.legalIdNumber) }}</span>
          <el-button plain round size="mini" type="danger" @click="changeLegalPerson">变更</el-button>
        </div>
        <div class="message">
          <p><i class="el-icon-user-solid" style="color:#68d022;"></i>企业管理员： {{ pageInfo.adminUserName }}</p>
          <span>账号：{{ handlePhone(pageInfo.adminUserPhone) }}</span>
          <el-button plain round size="mini" type="danger" @click="delegationCorporation">转授</el-button>
        </div>
        <div class="message">
          <p><i class="el-icon-user-solid" style="color:#0163ff;"></i>企业员工数： {{ this.singleTableData.length }}人
          </p>
          <el-button plain round size="mini" type="danger" @click="look">查看</el-button>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="digitalCertificateVisible" class="digitalCertificateModel" width="40%"
               @close="digitalCertificateClose">
      <div slot="title"></div>
      <div class="digitalCertificate">
        <ul>
          <li>持有人<span>{{ pageInfo.enterpriseName }}</span></li>
          <li>颁发者<span>NMGWX RSA OCA1</span></li>
            <li>证件号<span>{{ pageInfo.creditCode }}</span></li>
          <li>序列号<span>{{pageInfo.serialNo ? pageInfo.serialNo : '-'}}</span></li>
          <li>有效期<span>{{ pageInfo.caStartTime }} - {{pageInfo.caEndTime}}</span></li>
        </ul>
      </div>
      <div slot="footer" class="flexcolumn flexcenter">
        <el-button type="primary" @click="digitalCertificateClose">确定</el-button>
        <el-button type="text">《数字服务协议》</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogChangeVisible" class="dialog" title="法定代表人信息变更" width="34%"
               @close="dialogChangeClose">
      <div style="padding-left: 20px">
        <span style="margin-bottom: 20px;display: inline-block;font-weight: 600">原法定代表人信息</span>
        <el-form label-position="left" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="pageInfo.legalPerson" disabled style="width: 70%"></el-input>
          </el-form-item>
          <el-form-item label="证件号">
            <el-input v-model="pageInfo.legalIdNumber" disabled style="width: 70%"></el-input>
          </el-form-item>
        </el-form>
        <span style="margin-bottom: 20px;display: inline-block;font-weight: 600">新法定代表人信息</span>
        <el-form ref="dialogChangeModelRef" :model="dialogChangeModel" :rules="dialogChangeModelRules"
                 label-position="left" label-width="80px">
          <el-form-item label="姓名" prop="legalPerson">
            <el-input v-model="dialogChangeModel.legalPerson" placeholder="新姓名" style="width: 70%"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="legalIdNumber">
            <el-input v-model="dialogChangeModel.legalIdNumber" placeholder="新证件号" style="width: 70%"></el-input>
          </el-form-item>
        </el-form>
        <p style="width: 70%">
          <i class="el-icon-info"></i>
          点击“提交”按钮，系统将更新法定代表人信息，请知晓： 法定代表人印章将失效，需重新创建
        </p>
      </div>
      <div slot="footer" style="padding-right: 35px">
        <el-button size="small" @click="dialogChangeClose">取消</el-button>
        <el-button :loading="diaLogChangeSubmitLoading" size="small" type="primary" @click="dialogChangeSubmit">提交
        </el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="delegateTableVisible" class="dialog" title="转授企业管理员身份" width="38%"
               @close="delegateTableClose">
      <el-form ref="elegateFormModelRef" :model="delegateFormModel" inline label-position="left" size="small">
        <el-form-item label="姓名" prop="userName">
          <el-input v-model="delegateFormModel.userName" placeholder="请输入员工姓名" />
        </el-form-item>
        <el-form-item label="账号" prop="userPhone">
          <el-input v-model="delegateFormModel.userPhone" placeholder="请输入员工账号" />
        </el-form-item>
        <el-form-item>
          <el-button @click="resetDelegateForm">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="pageGetEnterpriseUserList">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="singleTable"
        v-loading="singleTableLoading"
        :data="singleTableData"
        highlight-current-row
        size="small">
        <el-table-column
          label="姓名(昵称)"
          prop="user_name">
        </el-table-column>
        <el-table-column
          label="大鸿签帐号"
          prop="user_phone">
        </el-table-column>
        <el-table-column
          label="角色"
          prop="enterprise_user_type">
          <template slot-scope="scope">
            <span>{{ scope.row.enterprise_user_type === 1 ? "管理员" : "员工" }}</span>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button :disabled="scope.row.isEnterpriseUserType" type="text" @click="openDelegation(scope.row)">
              将其设为管理员
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer">
        <div class="padding15All flexright">
          <el-pagination
            :current-page="singleTableCurrentPage"
            :page-size="singleTablePageSize"
            :page-sizes="[10,20,30,40]"
            :total="singleTableTotal"
            layout="sizes, total, prev, pager, next, jumper"
            @size-change="delegateTableSizeChange"
            @current-change="delegateTableCurrentChange">
          </el-pagination>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogDelegateVisible" class="dialog" title="转授企业管理员身份前需要通过短信验证"
               width="30%" @close="dialogDelegateClose">
      <el-form ref="delegationCodeRef" :model="delegationCode" size="small">
        <el-form-item :rules="{required: true, message: '请输入验证码', trigger: 'blur'}" label="验证码" prop="code">
          <el-input v-model="delegationCode.code" maxlength="4" placeholder="请输入" show-word-limit
                    style="width: 20%"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button :loading="secondLoading" type="primary" @click="confirmDelegate">
            {{ confirmButtonText ? confirmButtonText : `向(手机号${handlePhone(pageInfo.adminUserPhone)})发送验证码` }}
          </el-button>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="small" @click="dialogDelegateClose">取消</el-button>
        <el-button :loading="delegateLoading" size="small" type="primary" @click="doDelegation">转授</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAllEnterprise,
  postChangeOfLegalPerson,
  getEnterpriseUserList,
  changeOfAdmin,
  getSmsPhoneCode
} from "@/api/business";
import Cookies from "js-cookie";

export default {

  data() {
    return {
      pageInfo: {},
      enterpriseId: localStorage.getItem("companyid") | "",
      digitalCertificateVisible: false,
      dialogChangeVisible: false,
      dialogChangeModel: {},
      diaLogChangeSubmitLoading: false,
      dialogDelegateVisible: false,
      delegateTableVisible: false,
      delegateFormModel: {
        userName: null,
        userPhone: null
      },
      singleTableData: [],
      currentRow: null,
      dialogChangeModelRules: {
        legalPerson: [{ required: true, message: "请填写姓名", trigger: "blur" }],
        legalIdNumber: [
          { required: true, message: "请填写身份证号", trigger: "blur" },
          {
            pattern: /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,
            message: "请填写正确的身份证号",
            trigger: "blur"
          }
        ]
      },
      singleTableCurrentPage: 1,
      singleTablePageSize: 10,
      singleTableTotal: 0,
      singleTableLoading: false,
      delegationCode: {
        code: null
      },
      second: 60,
      secondLoading: false,
      confirmButtonText: "",
      adminId: null,
      delegateLoading: false
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.pageGetAllEnterprise();
      this.pageGetEnterpriseUserList();
    },
    pageGetAllEnterprise() {
      getAllEnterprise({ userId: Cookies.get("admin_id"), enterpriseId: this.enterpriseId }).then(res => {
        this.pageInfo = res.result[0];
      });
    },
    pageGetEnterpriseUserList() {
      this.singleTableLoading = true;
      getEnterpriseUserList({ enterpriseId: this.enterpriseId, ...this.delegateFormModel }).then(res => {
        this.singleTableLoading = false;
        this.singleTableData = res.result.List;
        this.singleTableTotal = res.result.totel;
        this.singleTableData.forEach(item => {
          item.isEnterpriseUserType = item.enterprise_user_type === 1;
        });
      });
    },
    lookCertificate() {
      this.digitalCertificateVisible = true;
    },
    digitalCertificateClose() {
      this.digitalCertificateVisible = false;
    },
    changeLegalPerson() {
      this.dialogChangeVisible = true;
    },
    dialogChangeClose() {
      this.dialogChangeVisible = false;
    },
    dialogChangeSubmit() {
      this.$refs.dialogChangeModelRef.validate(bool => {
        if (bool) {
          this.diaLogChangeSubmitLoading = true;
          let data = {
            ...this.dialogChangeModel,
            id: this.enterpriseId
          };
          postChangeOfLegalPerson(data).then(res => {
            this.diaLogChangeSubmitLoading = false;
            if (res.code === 200) {
              this.dialogChangeVisible = false;
              this.$message.success(res.message);
              this.init();
            }else{
              this.diaLogChangeSubmitLoading = false;
            }
          }).catch(() => {
            this.diaLogChangeSubmitLoading = false;
          });
        }
      });
    },
    dialogDelegateClose() {
      this.dialogDelegateVisible = false;
    },
    delegateTableClose() {
      this.delegateTableVisible = false;
    },
    delegationCorporation() {
      this.delegateTableVisible = true;
      this.pageGetEnterpriseUserList();
    },
    look() {
      this.$router.push({
        path: "/business/member"
      },()=>{});
    },
    resetDelegateForm() {
      this.$refs.elegateFormModelRef.resetFields();
      this.pageGetEnterpriseUserList();
    },
    confirmDelegate() {
      if (this.second === 60) {
        this.secondLoading = true;
        getSmsPhoneCode({ phone: this.pageInfo.adminUserPhone }).then(res => {
          this.secondLoading = false;
          if (res.code === 200) {
            this.$message.success(res.message);
          }
        });
        let interval = setInterval(() => {
          this.second -= 1;
          this.confirmButtonText = this.second + "s后重新发送";
          if (this.second === 0) {
            clearInterval(interval);
            interval = null;
            this.second = 60;
            this.confirmButtonText = "重新发送";
          }
        }, 1000);
      }
    },
    openDelegation(info) {
      this.adminId = info.user_id;
      this.dialogDelegateVisible = true;
    },
    doDelegation() {
      this.$refs.delegationCodeRef.validate(bool => {
        if (bool) {
          this.delegateLoading = true;
          let data = {
            code: this.delegationCode.code,
            signEnterpriseId: this.enterpriseId,
            userId: this.adminId
          };
          changeOfAdmin(data).then(res => {
            this.delegateLoading = false;
            if (res.code === 200) {
              this.dialogDelegateClose();
              this.$message.success("转让成功");
              this.$router.push({
                path: "/work"
              },()=>{});
            }
          });
        }
      });
    },
    delegateTableSizeChange(e) {
      this.singleTablePageSize = e;
      this.pageGetEnterpriseUserList();
    },
    delegateTableCurrentChange(e) {
      this.singleTableCurrentPage = e;
      this.pageGetEnterpriseUserList();
    },
    desensitization(val) {
      if (val) {
        return val.replace(/^(.{4})(?:\d+)(.{4})$/, "$1**********$2");
      }
    },
    handlePhone(phone) {
      if (phone) {
        return phone.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.companyInfo {
  height: 100%;
  background-color: #fafafa;
  padding: 15px;

  .infoMain {
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;

    .img {
      position: relative;

      .avatar {
        width: 120px;
        height: 120px;
        border-radius: 60px;
        position: absolute;
        bottom: -55px;
        left: 50%;
        margin-left: -60px;
        cursor: pointer;
      }

      img {
        width: 100%;
        height: auto;
      }
    }

    .infoTitle {
      text-align: center;
      padding-top: 80px;

      span {
        font-size: 14px;
        color: #a3a3a3;
      }
    }
  }

  .info {
    margin: 30px auto 0;
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #eee;
    padding: 20px 0;

    .message {
      justify-content: space-between;
      display: flex;
      align-items: center;
      flex-direction: column;
      height: 100px;
      box-sizing: border-box;

      span {
        font-size: 14px;
        color: #333;
      }
    }

    .message:nth-child(2) {
      border-right: 1px solid #eee;
      border-left: 1px solid #eee;
      padding: 0 40px;
    }
  }

  .digitalCertificateModel {
    :deep(.el-dialog__header) {
      display: none;
    }

    :deep(.el-dialog__footer) {
      padding-top: 0;
      padding-bottom: 10px;
    }

    .digitalCertificate {
      width: 535px;
      height: 400px;
      margin: 0 auto;
      background: url("@/assets/img/certificate.png") no-repeat center;
      background-size: cover;
      display: flex;
      align-items: center;

      ul {
        margin-left: 80px;
        padding-top: 60px
      }

      ul > li {
        margin: 20px 0;
      }

      ul > li > span {
        margin-left: 35px;
      }
    }
  }

  .dialog {

  }
}
</style>